<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="http://cdn.staticfile.org/cesium/1.69.0/Widgets/widgets.css">
    <link rel="stylesheet" href="../css//index.css">
</head>

<body>
    <div class="fun-menu">
        等值线图层
        <button onclick="test(1)">虚拟点位构建</button>
        <button onclick="flyto(1)">飞到</button>
        <button onclick="show(true)">显示</button>
        <button onclick="show(false)">隐藏</button>
        <button onclick="clear1()">清除</button>
    </div>
    <div id=cesiumContainer></div>
    <!-- 引入turf插件 -->
    <script src="../libs/turf.min.js"></script>

    <script src="http://cdn.staticfile.org/cesium/1.69.0/Cesium.js"></script>
    <script src="../libs/cpc/index.js"></script>
    <script>
        const map = new cpc.Map({
            container: "cesiumContainer",
            camera: {
                position: {
                    x: 119.3006147,
                    y: 26.0316619,
                    z: 4809,
                },
                angle: {
                    heading: 7.33,
                    pitch: -72.53,
                    roll: 0,
                },
                duration: 3,
                complete: () => {
                    console.log("飞行结束了");
                }
            },
            baseMaps: [
                "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
            ]
        });
        function test(type) {
            const points = [];
            //每3千米一个点
            var cellWidth = 3000;
            var _pointGrid = turf.pointGrid([119.2, 25.8, 119.7, 26.3], cellWidth, { units: 'meters' });
            for (var i = 0; i < _pointGrid.features.length; i++) {
                var coordinates = _pointGrid.features[i].geometry.coordinates;
                points.push({
                    coordinates: coordinates,//坐标信息
                    value: Math.random() * 5,//生成0~5的值
                });
            }
            const option = {
                points: points,//格式：[{coordinates:[x,y],value:1}]
                levels: [  //等值线的级数
                    {
                        value: 0,
                        style: {
                            width: 5,
                            material: Cesium.Color.RED
                        }
                    },
                    {
                        value: 1,
                        style: {
                            width: 5,
                            material: Cesium.Color.GREEN
                        }
                    },
                    {
                        value: 2,
                        style: {
                            width: 5,
                            material: Cesium.Color.YELLOW
                        }
                    },
                    {
                        value: 3,
                        style: {
                            width: 5,
                            material: Cesium.Color.ROSYBROWN
                        }
                    },
                    {
                        value: 4,
                        style: {
                            width: 5,
                            material: Cesium.Color.BLUE
                        }
                    },
                    {
                        value: 5,
                        style: {
                            width: 5,
                            material: Cesium.Color.AQUA
                        }
                    }
                ]
            }
            console.log(points);
            xxx = new cpc.IsoLineLayer(option);
            map.add(xxx);
        }
        function flyto() {
            console.log("flyto")
            xxx.flyTo();
        }
        function show(show) {
            xxx.show = show;
        }
        function clear1() {
            map.remove(xxx);
        }
    </script>
</body>

</html>